<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/news.css">
    <title>企业新闻</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html ">产品</a></li>
                    <li><a href="./programme.html" >解决方案</a></li>
                    <li><a href="./customer.html" >客户案列</a></li>
                    <li><a href="./consult.html">咨询与服务</a></li>
                    <li><a href="./news.html" class="active">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <div class="tag_btn">
        <p class="font_20">联系我们</p>
     </div>
    <main>
        <div class="banner">
            <img src="./img/u1370.png" alt="">
             <div class="cout_box">
                <p class="font_30">新闻中心</p>
                <h3 class="font_33">汇聚相关产品新闻报道</h3>
             </div>
        </div>
        <div class="news_list">
            <div class="container">
                <ul>
                    <!-- <li>
                        <a href="">
                            <img src="./img/u1378.png" alt="">
                            <div class="count">
                                <p class="font_20 font_black">2022-XX-XX</p>
                                <h3 class="font_30 font_lighter font_bule">这是一段新闻标题示例</h3>
                                <p class="font_20 font_black">
                                    这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生</p>
                            </div>
                        </a>
                    </li> -->
                </ul>
            </div>
         </div>
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
    <div id="mask">
        <div class="claerFlex">
            <p class="font_20 font_white">联系我们</p>
            <span id="close">
                <img src="./img/u526.png" alt="">
            </span>
            <div id="count_box" >
                <ul class="count">
                    
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="./js/ajax.js"></script>
<script>
    window.onl;onload = ()=>{
        // let data = [
        //     {
        //         title:'这是一段新闻标题示例',
        //         time:'2022-XX-XX',
        //         count:'这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生',
        //         img:'./img/u1378.png',
        //         src:'./news_dail.html',
        //     },
        //     {
        //         title:'这是一段新闻标题示例',
        //         time:'2022-XX-XX',
        //         count:'这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生',
        //         img:'./img/u1378.png',
        //         src:'./news_dail.html',
        //     },
        //     {
        //         title:'这是一段新闻标题示例',
        //         time:'2022-XX-XX',
        //         count:'这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生',
        //         img:'./img/u1378.png',
        //         src:'./news_dail.html',
        //     },
        //     {
        //         title:'这是一段新闻标题示例',
        //         time:'2022-XX-XX',
        //         count:'这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生',
        //         img:'./img/u1378.png',
        //         src:'./news_dail.html',
        //     },
        //     {
        //         title:'这是一段新闻标题示例',
        //         time:'2022-XX-XX',
        //         count:'这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生',
        //         img:'./img/u1378.png',
        //         src:'./news_dail.html',
        //     },
        //     {
        //         title:'这是一段新闻标题示例',
        //         time:'2022-XX-XX',
        //         count:'这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生',
        //         img:'./img/u1378.png',
        //         src:'./news_dail.html',
        //     },
        //     {
        //         title:'这是一段新闻标题示例',
        //         time:'2022-XX-XX',
        //         count:'这是一段新闻文字内容示例：有的医院已经装了有线对讲，为什么还要装无线呼叫？原因很简单： 首先，很多医院的内线电话（有线对讲）不是每个床位装一部； 其次，有的重病患者没有能力走到地下到墙边打电话，他只有随手一按的能力； 再者，如果值班医生（护士）正在查房或者一时比较忙，病人就怎么也打不通医生',
        //         img:'./img/u1378.png',
        //         src:'./news_dail.html',
        //     },
        // ]
        get({
            type:'GET',
            url:'/v1/news/list',
            success:function(res){
                if(res.code === 200){
                    creaotr(res.data)
                }
            }
        })
        let data2 = [
        {
            title:'咨询服务',
            msg:[
                {
                    img:'./img/u537.png',
                    title:'产品咨询',
                    src:'./consult.html'
                },
                {
                    img:'./img/u540.png',
                    title:'售前客服咨询',
                    src:'./service.html'
                },
            ]
        },
        {
            title:'联系方式',
            msg:[
                {
                    img:'./img/u548.png',
                    text:'XXX-XXXXXXXXX'
                },
                {
                    img:'./img/u550.png',
                    text:'XXXXXX@XXX.com',
                }
            ]
        }
    ];
        let tag_bnt = document.querySelector('.tag_btn');
        let mask = document.querySelector('#mask');
        let close_btn = document.querySelector('#mask #close');
        let count = document.querySelector('#mask #count_box');
        let new_list = document.querySelector('.news_list ul');
        let ul_box = count.firstElementChild;
        function creaotr(data){
            data.forEach(v=>{
                let time = new Date(v.n_time);
                let y = time.getFullYear();
                let m = time.getMonth()+1<10? '0'+time.getMonth()+1:time.getMonth()+1;
                let d = time.getDay()<10? '0'+time.getDay():time.getDate();
                let str = y+'-'+m+'-'+d;
            new_list.innerHTML +=`
            <li>
                        <a href="${v.src}">
                            <img src="${v.img}" alt="">
                            <div class="count">
                                <p class="font_20 font_black">${str}</p>
                                <h3 class="font_30 font_lighter font_bule">${v.title}</h3>
                                <p class="font_20 font_black">
                                    ${v.count}</p>
                            </div>
                        </a>
                    </li>
            `
        })
        }
        
    data2.forEach((v,i)=>{
        let {title,msg} = v;
        if(i+1 === data2.length){
            console.log(i)
            ul_box.innerHTML +=`
            <li>
                        <p class="font_20 font_bold">${title}</p>
                    </li>
            `
            msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
            <div>
                            <img src="${item.img}" alt="">
                            <p class="font_17">${item.text}</p>
                        </div>
        `
        })
        }else{
            ul_box.innerHTML += `
        <li>
                        <p class="font_20 font_bold">${title}</p>
                        
                    </li>
        `
        msg.forEach((item,index)=>{
            ul_box.children[i].innerHTML +=`
        <a ${item.src?"href="+item.src :''}>
                            <img src="${item.img}" alt="">
                            <p class="font_20">${item.title}</p>
                        </a>
        `
        })
        }
    })
        tag_bnt.addEventListener('click',()=>{
        mask.style.display = 'block';
    })
    close_btn.addEventListener('click',()=>{
        mask.style.display = 'none';
        count.style.display = 'block';
      
    })
    }
</script>
</html>